<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
<!--    <my-viewer ref="myViewer" @erathIsok="setCylinder"></my-viewer>-->
    <div class="selectModelType" >
      <div class="tip"><p>柱体 | 面板</p></div>
      <div></div>
    </div>

    <div id="toolTip">
      {{tipName}}
      <p v-for="(item,i) in colorData">
        <span class="toolTip_span" :style="{backgroundColor: item.color}"></span>
        {{item.state}}：{{item.count}}
      </p>
    </div>
  </div>
</template>

<script>

  // import myViewer from "../cesiumViewer";
  export default {
    name: "dynamicCylinder",
    data(){
      return{
        handlerObj:null,
        tipName:"检测器状态",
        colorData:[{
            'count': 5,
            'color': '#17D84C',
            'state': '正常'
          },
          {
            'count': 5,
            'color': '#F44336',
            'state': '超标'
          },
          {
            'count': 10,
            'color': '#FFD21E',
            'state': '停产'
          },
          {
            'count': 9,
            'color': '#97B7C8',
            'state': '无数据'
          }
        ]
      }
    },
    mounted() {
      this.setCylinder();
      this.initHandle();
    },
    components:{
      // myViewer
    },
    methods:{
      //监听鼠标移动
      initHandle(){
        let toolTip = document.getElementById("toolTip");
        viewer.scene.globe.depthTestAgainstTerrain = true;
        this.handlerObj = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        this.handlerObj.setInputAction((event) => {
          //当前的写法，在三维状态下，可以实时获取鼠标位置，但是二维模式下，只有鼠标掠过实体时，才可以拾取
          let newPosition = viewer.scene.pickPosition(event.endPosition);//屏幕坐标 --> 世界坐标
          if (Cesium.defined(newPosition)) {
            console.log("像素位置event.endPosition:" + event.endPosition);
            // console.log("newPosition:" + newPosition);
            let pick = viewer.scene.pick(event.endPosition);//获取点击处的对象
            if (Cesium.defined(pick) && (pick.id.id === '456')) {//获取到目标
              toolTip.style.left = event.endPosition.x + 0 + "px";
              toolTip.style.top = event.endPosition.y + 0 + "px";
              toolTip.style.display = "block";
            }else {
              toolTip.style.display = "none";
            }
          }else {
            toolTip.style.display = "none";
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      },


      //初始化柱体
      setCylinder(){
        let blueBox = viewer.entities.add({
          id:"123",
          name: "Blue box",
          position: Cesium.Cartesian3.fromDegrees(113.654, 34.74),
          box: {
            dimensions: new Cesium.Cartesian3(40.0, 30.0, 500.0),
            material: Cesium.Color.BLUE,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          },
        });

        let redBox = viewer.entities.add({
          id:"456",
          name: "Red box with black outline",
          position: Cesium.Cartesian3.fromDegrees(113.653, 34.74),
          box: {
            dimensions: new Cesium.Cartesian3(40.0, 30.0, 500.0),
            material: Cesium.Color.RED,
            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //RELATIVE_TO_GROUND  CLAMP_TO_GROUND
            //distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
          },
        });

        viewer.flyTo(viewer.entities);
        viewer.scene.camera.changed.addEventListener(this.dynamicHandle)
        // 添加相机开始移动监听，触发render监听
        // viewer.scene.camera.moveStart.addEventListener(() => {
        //   this.$refs['myViewer'].postRenderAdd(this.dynamicHandle);
        // });
        // //添加相机结束移动监听，移除render监听
        // viewer.scene.camera.moveEnd.addEventListener(() => {
        //   console.log("移动结束了")
        //   this.dynamicHandle
        //   // this.$refs['myViewer'].postRenderRemove(this.dynamicHandle);
        // });
      },
      dynamicHandle(){
        //let camarePosition = viewer.camera.positionCartographic;
        let camarePosition = viewer.camera.positionWC;

        //let distance = Cesium.Cartesian3.distance(Cesium.Cartographic.toCartesian(camarePosition),Cesium.Cartesian3.fromDegrees(-112.001, 40.0));
        let distance = Cesium.Cartesian3.distance(camarePosition,Cesium.Cartesian3.fromDegrees(113.654, 34.74));

        if(distance>200 && distance<4000){
          let scale = 1-(2000-distance)/2000;
          //4. 设置大小
          let labelEntity = viewer.entities.getById(`456`);
          labelEntity.box.dimensions = new Cesium.Cartesian3(40.0*scale, 30.0*scale, 500.0*scale);//设置大小
          console.log("重设了大小")
        }
      }
    },
    destroyed() {
      viewer.scene.camera.changed.removeEventListener(this.dynamicHandle);
      mapBaseF.removeAllNtt();
      this.handlerObj.destroy();
      // this.handlerObj = null;

    }
  }
</script>

<style scoped>
  #toolTip{
    position: absolute;
    border-style: solid;
    white-space: nowrap;
    z-index: 9999999;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    background-color: rgba(50, 50, 50, 0.7);
    border-width: 0px; border-color: rgb(51, 51, 51);
    border-radius: 4px; color: rgb(255, 255, 255);
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 5px;
    left: 173px;
    top: 0px;
    pointer-events: none;
  }

  #toolTip p{
    margin: 0;
  }

  .toolTip_span{
    display:inline-block;
    margin-right:5px;
    border-radius:10px;
    width:10px;
    height:10px;
    background-color:#17D84C;
  }
</style>
